<template>
  <div class="login-content column account">
    <div class="user gap column">
      <div class="text">用户名</div>
      <el-input
        v-model="userName"
        style="width: 100%"
        placeholder="请输入用户名"
      >
        <template #prefix>
          <div class="user-icon icon"></div>
        </template>
      </el-input>
    </div>
    <div class="password gap">
      <div class="text">密码</div>
      <el-input
        v-model="password"
        style="width: 100%"
        type="password"
        placeholder="请输入密码"
        show-password
      >
        <template #prefix>
          <div class="password-icon icon"></div>
        </template>
      </el-input>
      <div class="warn" v-if="isWarn">账号密码有误，请核对后重试!</div>
    </div>
  </div>
</template>
<script setup>
import { defineModel } from 'vue'

defineProps({
  isWarn: Boolean
})

const userName = defineModel('userName')
const password = defineModel('password')
</script>
<style lang="less" scoped>
@import '../css/login.less';

.login-content {
  .user {
    .user-icon {
      background: url('@/assets/images/login/user-icon.svg') no-repeat center
        center;
      background-size: contain;
    }
  }

  .password {
    .password-icon {
      background: url('@/assets/images/login/password-icon.svg') no-repeat
        center center;
      background-size: contain;
    }

    :deep(.el-icon) {
      font-size: 24px;
    }
  }
}
</style>
